<template>
	<view class="content">
		<u-navbar :is-back="true" back-icon-color="#fff" :immersive="true"  title="会员中心"  :border-bottom="false" :title-color="titleColor" :background="background">
		</u-navbar>
		<view class="user-box">
			<view class="user-tx">
				<image :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="user-r">
				<view class="user-name">
					{{userInfo.nickname || '请登录~'}}
				</view>
				<view class="user-phone">
					<text v-if="userInfo.discount">会员折扣：{{userInfo.discount}}</text>
					<text v-if="userInfo.general">普洗卡剩余次数：{{userInfo.general}}次</text>
					<text v-if="userInfo.fine">精洗卡剩余次数：{{userInfo.fine}}次</text>
					<text  v-if="userInfo.curing">轻奢养护卡剩余次数：{{userInfo.curing}}次</text>
					
				</view>
			</view>
		</view>
		<view class="user-yue">
			<view>
				账户余额：{{ userInfo.money }}
			</view>
			<button class="u-reset-button" @click="logTo()" >购买记录</button>
		</view>
		<view class="vip-list">
			<view class="vip-li" :class="active == index?'active':''"
			 v-for="(item,index) in vipList" :key="index"
			 @click="vipOrder(index,item.price,item.id)"
			 >
				<view class="name">{{ item.title }}</view>
				<view class="price">
					<text>￥</text>
					<view>{{ item.price }}</view>
				</view>
				<view class="des">
					{{ item.describle }}
				</view>
			</view>
		</view>
		<view class="tip">
			<view class="tip-title">温馨提示</view>
			<view class="tip-content">
				<view>1、仅限本人使用，不得以任何形式转卖。</view>
				<view>2、一经购买，不支持退卡服务。</view>
				<view>3、储值对应的金额，可获得会员权限，享受折扣服务。</view>
			</view>
		</view>
		<view class="buy-vip">
			<button class="u-reset-button" @click="payVip" :disabled="loading" :loading="loading">
				¥{{price}}立即开通
			</button>
			<view class="buy-xieyi">
				<u-checkbox v-model="checked" shape="circle"
				active-color="#FBAA27"
				>
				</u-checkbox>
				<view class="text-area">
					已阅读并同意<text @click="toUrl('/pages/public/agreement/agreement?type=xieyi')">《鞋橙洗鞋柜用户协议》</text>
				</view>
			</view>
		</view>
	
	<u-popup v-model="show" mode="bottom">
		<view style="height: 181px; display: flex;align-items: center;justify-content: center;">
			<view style="text-align: center;">
				<text style="display: block;padding: 32px;"> 您未授权使用手机号，商家无法联系您，请尽快授权手机号！</text>
				<u-button size="medium" class="u-reset-button pay-btn" open-type="getPhoneNumber" type="success"
					@getphonenumber="getphone">授权</u-button>
			</view>
		</view>
	</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{'background':'rgba(0,0,0,0)'},
				titleColor:'#fff',
				checked:false,
				active:0,
				price:0.00,
				good_id:0,
				userInfo:[],
				loading:false,
				vipList:[
					
				],
				show:false,
			}
		},
		onLoad() {
			
			this.getUserList()
			this.getUserInfo()
		},
		onShow() {
			if(this.$store.state.shoecabinet_id){
				
			}else{
				uni.showToast({
					icon:'none',
					title:'您未选择鞋柜,请先选择鞋柜'
				})
				setTimeout(function(){
					uni.switchTab({
						url:'/pages/index/index'
					})
				},1000)
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				uni.$u.http.post('user/userinfo',{
					openid:uni.getStorageSync('openid')
				}).then(res =>{
					console.log(res)
					this.userInfo = res.data
				})
			},
			toUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			logTo(){
				uni.navigateTo({
					url:'./log/log'
				})
			},
			vipOrder(index,price,id){
				this.active = index
				this.price = price
				this.good_id = id
				// this.generateOrder()
			},
			generateOrder(){
				let that = this
				uni.showLoading({
					mask:true
				})
				uni.request({
				    url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/create_order', 
					method:'POST',
				    data: {
				        shoecabinet_id:that.$store.state.shoecabinet_id,
						user_id: uni.getStorageSync('userId'),
						openid: uni.getStorageSync('openid'),
						good_id:that.good_id,
						amount:this.price,
						type:'recharge',
						coupon_id:'',
						coupon_type:'',
						coupon_fee:'',
						remark:this.remark,
						enclosure_images:'',
						buy_type:'alone',
						cart_id:''
				    },
				    success: (res) => {
						uni.hideLoading()
						that.loading = false
				        console.log(res.data,'生成订单');
						this.order_id = res.data.data.order_id
						this.zhifu()
						// that.cabinet = res.data.data.cabinet
						// that.coupon = res.data.data.coupon
						// that.goods = res.data.data.goods
				    }
				});
			},
			payVip(){
				if (!uni.getStorageSync('phoneNumber')) {
					this.show = true;
				} else {
				
				if(!this.checked){
					uni.showToast({
						icon:'none',
						title:'请先已阅读并同意用户协议'
					})
					return false
				}
				uni.showLoading({
					mask:true
					
				})
				this.loading = true
				this.generateOrder()
				}
			},
			// 立即支付
			zhifu(){
				let that = this
				uni.showLoading({
					mask:true
				})
				uni.request({
				    url: 'https://www.sdxiecheng.cn/index.php/addons/epay/api/pay_order', 
					method:'POST',
				    data: {
				        user_id: uni.getStorageSync('userId'),
						openid: uni.getStorageSync('openid'),
						pay_type:'wechat',
						order_id:that.order_id
				    },
				    success: (res) => {
						uni.hideLoading()
						that.loading = false
				        console.log(res.data);
						if(res.data.code == 200){
							if(res.data.data != ''){
								wx.requestPayment({
									timeStamp: res.data.data.timeStamp+'',
									nonceStr: res.data.data.nonceStr,
									package: res.data.data.package,
									signType: res.data.data.signType,
									paySign: res.data.data.paySign,
									success:function(res){
										console.log(res)
										uni.showToast({
											icon:'success',
											title:'开通成功',
											duration:2000
										})
										that.getUserInfo()
										// uni.redirectTo({
										//     url: '../myOrder/myOrder?index=2&type=shangpin'
										// });
									},
									fail:function(res){
										
										// console.log(res.errMsg)
										uni.showToast({
											icon:'none',
											title:'取消支付'
										})
										// uni.redirectTo({
										//     url: '../myOrder/myOrder?index=1&type=shangpin'
										// });
									},
									complete:function(res){}
								})
							}else{
								uni.navigateTo({
									url:'../../pay/pay'
								})
							}
						}else{
							uni.hideLoading()
							that.loading = false
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
						
						// that.cabinet = res.data.data.cabinet
						// that.coupon = res.data.data.coupon
						// that.goods = res.data.data.goods
						// that.generateOrder()
				    },
					fail: (err) => {
						console.log(err)
						uni.hideLoading()
						that.loading = false
					}
				});
			},
			// 会员中心-充值卡次数卡接口
			getUserList(){
				uni.$u.http.post('/userrecharge/index',{}).then(res =>{
					console.log(res)
					this.vipList = res.data
					this.price = this.vipList[0].price
					this.good_id = this.vipList[0].id
					// this.generateOrder()
				}).catch(err =>{
					
				})
			},
			getphone(e) {
				if (!e.detail.iv) {
					uni.showToast({
						title: '获取手机号失败',
						icon: 'none'
					})
					return;
				}
				var that = this;
				uni.login({
					provider: 'weixin',
					success(res) {
						let code = res.code;
						var obj = {
							code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}
						that.decryptPhone(obj);
					}
				})
			},
			decryptPhone(obj) {
				uni.$u.http.post('user/getMobile', obj).then(res => {
					// console.log(res.data)
					this.postPhone(res.data.phoneNumber)
					// this.postPhone()
				})
			},
			// 提交手机号
			postPhone(phone) {
			
				uni.$u.http.post('user/binding', {
					mobile: phone,
					// openid: uni.getStorageSync('openid')
				}).then(res => {
					// console.log(res, '授权  ')
			
					uni.setStorageSync('phoneNumber', phone)
					uni.showToast({
						icon: 'success',
						title: '授权成功'
					})
					this.show = false;
			
			
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.msg
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.content{
		padding-bottom: 50rpx;
	}
.user-box{
	min-height: 350rpx;
	background: url(https://www.sdxiecheng.cn//img/vip-bg.jpg) no-repeat;
	background-size: 100% 100%;
	display: flex;
	padding-top: calc(129rpx + var(--status-bar-height));
	padding-left: 60rpx;
	.user-tx{
		width: 114rpx;
		height: 114rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 36rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.user-r{
		margin-top: 17rpx;
		.user-name{
			font-size: 36rpx;
			color: #FFFFFF;
			margin-bottom: 18rpx;
			font-weight: bold;
		}
		.user-phone{
			font-size: 24rpx;
			color: #FFFFFF;
			font-weight: 500;
			text{
				margin-right: 10rpx;
				display: block;
				&:last-of-type{
					margin-bottom: 40rpx;
				}
			}
		}
	}
}
// 钱包
.user-yue{
	margin: 0 20rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: -30rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	view{
		font-size: 28rpx;
		font-weight: bold;
	}
	button{
		margin: 0 ;
		width: 130rpx;
		height: 40rpx;
		// background: #FDDEA0;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #7C7C7C;
		font-size: 22rpx;
		background: rgba(253, 222, 160, 0.16)
	}
}
// vip订单列表
.vip-list{
	padding: 0 80rpx;
	margin-top: 40rpx;
	display: flex;
	flex-wrap: wrap;
	.vip-li{
		width: 280rpx;
		// width: 265rpx;
		min-height: 250rpx;
		padding: 10rpx 20rpx;
		background: #FDF8EE;
		border: 1px solid #F5D59B;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 40rpx;
		border-radius: 10rpx;
		&:nth-child(2n){
			margin-left: 20rpx;
			// margin-left: 60rpx;
		}
		view{
			color: #512C19;
		}
		.name{
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}
		.price{
			display: flex;
			align-items: flex-end;
			justify-content: center;
			font-size: 48rpx;
			color: #50320E;
			font-weight: bold;
			margin-bottom: 19rpx;
			line-height: 1;
			text{
				font-size: 24rpx;
				margin-bottom: 6rpx;
			}
		}
		.des{
			font-size: 24rpx;
			color: #50320E;
			opacity: 0.5;
		}
	}
	.active{
		background: url(https://www.sdxiecheng.cn//img/vip-active.png);
		background-size: 100% 100%;
	}
}
// 温馨提示
.tip{
	margin: 0 57rpx;
	margin-bottom: 99rpx;
	.tip-title{
		font-size: 24rpx;
		color: #FBAA27;
	}
	.tip-content{
		margin-top: 20rpx;
		line-height: 1.5;
		font-size: 24rpx;
	}
}
.buy-vip{
	button{
		width: 650rpx;
		height: 80rpx;
		color: #FFFFFF !important;
		background: #FBAA27 !important;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	.buy-xieyi{
		width: 650rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #7C7C7C;
		.text-area{
			margin-left: -22rpx;
		}
		text{
			color: #FBAA27;
		}
	}
	
	
}
</style>
